<template>
  <div class="section-wrap hiddenlc" style="height:100%;margin-top: 40px;">
      <!-- 头部 -->
      <div class="headerBox">
        <div class="header">
          <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>
          问题统计
        </div>
      </div>
      <vue-better-scroll
      class="wrapper"
      ref="scrollqq"
      :scrollbar="scrollbarObj"
      :pullDownRefresh="pullDownRefreshObj"
      :pullUpLoad="pullUpLoadObj"
      :startY='parseInt(startY)'
      @pullingUp="onPullingUp"
    > 
      <div class="form-section">
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>选择单位</label>
          </div>
          <div class="input_div">
            <input type="text" v-model="params.checkDepartName" :disabled="isDisabled"/>
            <input type="hidden" v-model="params.CheckDepartId"/>
            <x-icon type="ios-arrow-right" size="22" class="icon-right" @click="getCompany(1)"></x-icon>
          </div>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>检查类型</label>
          </div>
          <group>
            <popup-picker :data="checkTypeList" v-model="checkType"  placeholder='全部'></popup-picker>
          </group>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>统计指标</label>
          </div>
          <group>
            <popup-picker :data="indicators" v-model="statisticType " placeholder='请选择'></popup-picker>
          </group>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>项目类型</label>
          </div>
          <group>
            <popup-picker :data="accopt2" v-model="checkStandard" placeholder='请选择'></popup-picker>
          </group>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>开始时间</label>
          </div>
          <group>
            <datetime v-model="startDate" format="YYYY-MM-DD" clear-text="清除" @on-clear="clearStartDate"></datetime>
          </group>
        </div>
        <div class="form-item form-item-style1">
          <div class="label-title">
            <label>结束时间</label>
          </div>
          <group>
            <datetime v-model="endDate" clear-text="清除" @on-clear="clearEndDate"></datetime>
          </group>
        </div>
       <p class="search-btn" @click="search">查询</p>
        <div class="info_div2">
          <div class="form-item" v-if="accpentlist.length != 0">
            <div v-if="statisticType.length=='0' || statisticType[0]=='问题数量'" style="display: flex;justify-content: space-between;"><span style="font-size: 13px;color: #ff0808;margin-right: 28px;font-size: 13px;">问题总数：{{totalCount}}</span><span style="border: 0.5px solid #efeff4;margin-right: 28px"></span><span style="color: #333333;font-size: 13px;">一般问题</span><span style="margin-right: 28px;font-size: 13px;">：{{statistics.ybCount}}</span><span style="color: #333333;font-size: 13px;">重大问题</span><span style="font-size: 13px;">：{{statistics.zdCount}}</span></div>
            <div v-if="statisticType.length!=0 && statisticType[0]=='问题整改率'" style="display: flex;justify-content: space-between;"><span style="font-size: 13px;color: #ff0808;margin-right: 10px;font-size: 13px;">问题总数：{{totalCount}}</span><span style="border: 0.5px solid #efeff4;margin-right: 10px"></span><span style="color: #333333;font-size: 13px;">已整改问题</span><span style="margin-right: 10px;font-size: 13px;">：{{statistics.yzgCount}}</span><span style="color: #333333;font-size: 13px;">占比</span><span style="font-size: 13px;">：{{statistics.percent?Number(statistics.percent).toFixed(2):'0.00'}} %</span></div>
            <div v-if="statisticType.length!=0 && statisticType[0]=='问题一次性整改率'" style="display: flex;justify-content: space-between;white-space: nowrap;"><span style="font-size: 13px;color: #ff0808;margin-right: 20px;font-size: 13px;white-space: nowrap;">已整改：{{statistics.yzgCount}}</span><span style="color: #333333;font-size: 13px;white-space: nowrap;">一次性整改</span><span style="margin-right: 28px;font-size: 13px;white-space: nowrap;">：{{statistics.oneCount}}条</span><span style="color: #333333;font-size: 13px;white-space: nowrap;">占比</span><span style="font-size: 13px;white-space: nowrap;">：{{statistics.percent?Number(statistics.percent).toFixed(2):'0.00'}} %</span></div>
          </div>
        </div>
        <div class="project_div">
          <ul class="project_list">
            <li v-for="(item, index) in accpentlist" :key="index">
              <div v-if="statisticType.length=='0' || statisticType[0]=='问题数量'">
                <p>{{item.checkDeptName?item.checkDeptName:'----'}}</p>
                <span style="margin-right: 30px">一般问题：{{item.ybCount}}</span>
                <span style="margin-right: 30px">重大问题：{{item.zdCount}}</span>
                <span>总数：{{item.totalCount}}</span>
              </div>
              <div v-if="statisticType.length!=0 && statisticType[0]=='问题整改率'">
                <p>{{item.checkDeptName?item.checkDeptName:'----'}}</p>
                <span style="margin-right: 30px">问题总数：{{item.totalCount}}</span>
                <span style="margin-right: 30px">已整改问题：{{item.yzgCount}}</span>
                <span>占比：{{Number(item.yzgCount/item.totalCount * 100).toFixed(2)}} %</span>
              </div>
              <div v-if="statisticType.length!=0 && statisticType[0]=='问题一次性整改率'">
                <p>{{item.checkDeptName?item.checkDeptName:'----'}}</p>
                <span style="margin-right: 30px">已整改：{{item.yzgCount}}</span>
                <span style="margin-right: 30px">一次性整改：{{item.oneCount}}</span>
                <span>占比：{{Number(item.yzgCount/item.totalCount * 100).toFixed(2)}} %</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </vue-better-scroll>
    <!--classValue 显示隐藏   data树结构  nodeClicK节点点击返回值  name显示的字段  -->
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%">
        <ztree
          :data="data"
          @nodeClick="nodeClick"
          :name="'departName'"
        ></ztree>
      </popup>
    </div>
  </div>

</template>
<script>
  import selectDepart from "@commonComponents/selectDepart/selectDepart";
  import ztree from "@commonComponents/tree";
  import formatDate from "../../utils/formatDate";
  import VueBetterScroll from "vue2-better-scroll"
  import {
    XHeader,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    TransferDom,
    Popup
  } from "vux";

  export default {
    directives: {
      TransferDom
    },
    data() {
      return {
        accopt1: [['已整改', '待整改']],
        accopt2: [],
        indicators: [['问题数量', '问题整改率', '问题一次性整改率']], // 统计指标
        checkTypeList:[],
        projectList: [], // 项目类型选项列表
        checkStandard: [],
        checkType: [],
        statisticType: [],
        statistics: {}, // 问题统计总数
        /*下拉刷新*/
        resultlist: [],
        scrollbarObj: {fade: true},
        pullDownRefreshObj: false,
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据了"
          }
        },
        startY: 0,
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700,
        isDisabled: true, // 是否禁止输入
        totalCount: 0, //量化考试
        accpentlist: [],
        classValue: false,
        data: [],
        params: {
          bcheckDeptName: "",
          checkType: "",
          statisticType: "",
          checkStandardId: "",
          startDate: "",
          endDate: "",
          skipCount: 0,
          maxResultCount: 10
        },
        startDate: '',
        endDate: '',
        selectDepartType: 0
      };
    },
    components: {
      selectDepart,
      Popup,
      VueBetterScroll,
      ztree
    },
    created() {
      this.initDate();
      // this.getData();
      this.getCheckTypeList();
      this.getProject();
      
    },
    mounted(){
        let that = this;
        this.$bridge.registerHandler("setToken", function(data) {
          that.$store.state.Authorization = "Bearer " + data;
          that.getData();
          that.getProject();
          that.getCheckTypeList();
        });

        this.connectWebViewJavascriptBridge(function(bridge) {
          bridge.init(function(message, responseCallback) {});
          bridge.registerHandler("setToken", function(data) {
            that.$store.state.Authorization = "Bearer " + data;
            that.getData();
            that.getProject();
            that.getCheckTypeList();
          });
        });
    },
    methods: {
      connectWebViewJavascriptBridge(callback) {
        if (window.WebViewJavascriptBridge) {
            callback(WebViewJavascriptBridge);
        } else {
          document.addEventListener("WebViewJavascriptBridgeReady", function() {
            callback(WebViewJavascriptBridge);
          }, false);
        }
      },
      search() {
        // 点击查询时清空数据存储列表
        this.accpentlist = [];
        this.params.skipCount = 0;
        this.getData();
      },
      getData() {
        if (this.startDate) {
          this.params.startDate = this.startDate + " 00:00:00";
        }
        if (this.endDate) {
          this.params.endDate = this.endDate + " 00:00:00";
        }
        // 被检查单位
        this.params.bcheckDeptName = this.params.checkDepartName;
        // 检查类型
        if(this.checkType != null && this.checkType.length > 0){
          this.params.checkType = this.checkType[0]
        }
        // 获取项目类型ID
        this.projectList.forEach(item => {
          if (item.type == this.checkStandard[0]) {
            this.params.checkStandardId = item.id;
          }
        });
        // 获取统计指标
        let statisticType = '';
        if (this.statisticType.length !== 0) {
          // 具体的统计指标类型
          statisticType = this.statisticType[0];
        }
        this.params.statisticType = this.getStatisticData(statisticType);

        this.$axiosAjax.getH5Statistics(this.params).then(res => {
          if (res.data.success) {
            // 没有统计数据进行提示
            if (res.data.result.checkDeptStatistics.length == 0 && this.params.skipCount == 0) {
              this.$vux.toast.text('暂无统计数据!');
            }
            // 获取问题总数
            this.statistics = res.data.result.statistics;
            // 统计问题总数
            if (this.params.statisticType == '0') {
              this.totalCount = Number(this.statistics.ybCount ) + Number(this.statistics.zdCount);
            } else if (this.params.statisticType == '1') {
              this.totalCount = this.statistics.totalCount;
            } else if (this.params.statisticType == '2') {
              this.totalCount = this.statistics.totalCount;
            }
            // 拼接上拉刷新的数组
            // relist为获取列表单位的数组
            let relist = res.data.result.checkDeptStatistics;
            if (this.params.skipCount == 0) {
              this.accpentlist = [];
            }
            this.accpentlist = this.accpentlist.concat(relist);
            let totalAllCount = res.data.result.totalCount;
            let resultCount = this.accpentlist.length;
            // 判断
            if (relist.length < 1) {
              this.$refs['scrollqq'].forceUpdate(false);
            } else {
              this.$refs['scrollqq'].forceUpdate(true);
            }
          }
        });
      },
      // 初始化时间查询数据
      initDate() {
        // 设置默认查询结束时间
        this.endDate = formatDate();
        // 设置默认查询开始时间
        let dateArr = formatDate().split("-");
        this.startDate = dateArr[0] + "-" + dateArr[1] + "-" + "01";
      },
      // 根据查询条件不同，集中处理接口请求
      getStatisticData (type) {
        if (type == '问题数量') {
          // 问题数量
          return '0';
        } else if (type == '问题整改率') {
          // 问题整改率
          return '1';
        } else if (type == '问题一次性整改率') {
          // 问题一次性整改率
          return '2';
        } else {
          // 默认问题统计
          return '0';
        }
      },
      goBack() {
        this.$bridge.callHandler({
          type: 'closePage',
          data: {}
        });
      },
      // 获取检查类型
      getCheckTypeList(){
        this.$axiosAjax.getCheckTypeList({codeName: '安全检查类型'}).then(res => {
         if(res.data.success == true){
            var arr = [];
            res.data.result.forEach(item =>{
              arr.push(item.codeName);
            })
            this.checkTypeList.push(arr);
         }
        });
      },
      getCompany(type) {
        this.classValue = true;
        this.selectDepartType = type;
        this.examinedUnits();
      },
      getProject() {
        // 获取项目类型
        this.$axiosAjax.getHiddenDangerProject().then(res => {
          if (res.data.success == true) {
            this.projectList = res.data.result;
            let temProLists = this.projectList.map(item => {
              return item.type;
            });
            this.accopt2 = [temProLists];
          }
        }).catch(err => {

        });
      },
      nodeClick(item) {
        this.params.BcheckDeptID = item.id;
        this.params.checkDepartName = item.departName;
        this.classValue = false;
      },
      clearStartDate() {
        this.startDate = "";
      },
      clearEndDate() {
        this.endDate = "";
      },
      onPullingUp() {
        // 上拉加载
        let limitcount = this.accpentlist.length;
        this.params.skipCount = limitcount;
        this.getData();
      },
      // 单位树数据
      examinedUnits(){
        this.$axiosAjax.examinedUnits({parentId:this.$store.state.departId}).then((res) => {
          if(res.data.success==true){
		    this.classValue=true;
            this.data=res.data.result;
          }
        }).catch(
          (err)=>{

          }
        )
      }
    }
  };
</script>
<style lang="less" scoped>
  .search-btn {
    width: 200px;
    line-height: 36px;
    border-radius: 20px;
    margin: 23px auto;
    color: #fff;
    background: #469b7a;
    text-align: center;
    font-size:16px;
    letter-spacing: 4px;
  }

  .form-item {
    .input_div {
      .vux-x-icon {
        fill: #999;
        float: right;
        margin-top: 18px;
      }

    }
  }

  .project_div {
    .project_list {
      box-sizing: border-box;
      padding-left: 10px;
      li {
        border-bottom: 1px solid #efeff4;
        height: 80px;
        position: relative;
        span{
          padding-left: 10px;
        }
        p{
          padding-left: 10px;
          color: #333333;
          margin-top: 16px;
          margin-bottom: 12px;
          font-size: 13px;
        }
        span{
          color: #b7b7b7;
          font-size: 13px;
        }
        .project_status {
          margin-top: 14px;
          strong {
            font-size: 12px;
          }

          strong.project_status1 {
            color: #ff7333;
          }

          strong.project_status2 {
            color: #469b7a;
          }

        }

        .vux-x-icon {
          fill: #999;
          right: 20px;
          top: 50%;
          margin-top: -11px;
          position: absolute;
        }

      }
    }
  }

  .add_btn {
    position: fixed;
    height: 62px;
    width: 62px;
    right: 30px;
    bottom: 35px;
  }
</style>
<style lang="less">
.hiddenlc .vux-cell-box .weui-cell {
  padding-right: 0 !important;
  border: 0 !important;
}
.hiddenlc .vux-cell-box:not(:first-child):before {
  border: none !important;
}
</style>